*{
    margin:0;
    padding:0;
    font-family:"Microsoft YaHei";

}
$defaultBgColor: #fff;
$borderColor: #e6e6e6;
$bgColor: #faf5fb;
@mixin m_border($direction){
    border:{
        #{$direction}: 1px solid $borderColor;
    }
}

.btn{
    width:70px;
    height:26px;
    line-height:26px;
    text-align:center;
    border:1px solid #f3f3f3;
    border-radius:4px;
    color:#fff;
    box-shadow:1px 1px 10px #333 inset;
    outline:none;
    cursor:pointer;
    &:hover{
        box-shadow: 1px 1px 10px #333;
    }
}
.btn-blue{
    background: #64a1fe;
}
.btn-green{
    background: #71d45d;
}
.container{
    @mixin pa{
        padding:0 50px;
    }
    display:flex;
    flex-flow:column nowrap;
    header,footer{
        height:40px;
        background: $bgColor;
    }
    header{
        @include m_border("bottom");
        @include pa;
    }
    footer{
        @include m_border("top");
        @include pa;
        margin-top:20px;
        //align-self:center;
        flex:auto;
    }

    nav{
        @include pa;
        height: 40px;
        line-height:40px;
        display:flex;
        margin-top:2px;
        a{
            padding:0 8px;
            text-align:center;
            text-decoration:none;
            &.curr{
                border:{
                    top:1px solid $borderColor;
                    right: 1px solid $borderColor;
                    bottom:1px solid $defaultBgColor;
                    left : 1px solid $borderColor;
                }
                position:relative;
                bottom:-1px;
                font-weight:bold;
            }
        }
    }
    .main{
        margin:0 50px;
        //min-height:500px;
        border:1px solid $borderColor;
        display:flex;
        flex-wrap:wrap;
        .tit{
            width:100%;
            height:20px;
            padding:5px;
            background: $bgColor;
            @include m_border("bottom");
        }
        .alibum{
            display:flex;
            width:100%;
        }
        .alibumName{
            //flex:auto;
            flex: none;
            min-width:150px;
            min-height:180px;
            margin:5px;
            display:flex;
            flex-wrap:wrap;
            align-content:flex-start;
            border:1px solid $borderColor;
            border-radius:5px;
            a{
                flex:none;
                width:100%;
                height:24px;
                padding-left:10px;
                line-height:24px;
                text-align:left;
                text-decoration:none;
                border-bottom:1px solid $borderColor;
                box-sizing:border-box;
                font-size:12px;
                &.curr{
                    background: $bgColor;
                }
            }
        }
        .alibumBox{
            flex:auto;
            margin:5px;
            min-width:150px;
            min-height:180px;
            p{
                position:relative;
                .file{
                    opacity:0;
                    position:absolute;
                    float:left;
                    z-index:2;
                    width:70px;
                    height:30px;
                    left:75px;
                    top:-3px;
                    cursor:pointer;
                    font-size:0;
                }
            }

            .alibuImages{
                display:flex;
                flex-wrap:wrap;
                .imageItem{
                    flex:none;
                    width:100px;
                    height:100px;
                    margin-top:10px;
                    margin-left:10px;
                    border:1px solid $borderColor;
                    position:relative;
                    img{
                        width:90px;
                        height:90px;
                        margin:5px;
                        border-radius:8px;
                    }
                    span{
                        position:absolute;
                        right:0px;
                        top:0px;
                        cursor:pointer;
                        color:#666;
                        font-size:12px;
                        font-weight:bold;
                        font-family: SimHei,FangSong,PMingLiU,NSimSun,SimSun,"Microsoft JhengHei";
                        &:hover{
                            color:#000;
                        }
                    }
                }
            }
            .pagination{
                display:flex;
                margin:20px 0 10px 0;
                justify-content:center;
                a{
                    width:20px;
                    height:20px;
                    text-align:center;
                    line-height:20px;
                    border:1px solid #999;
                    font-size:12px;
                    margin-left:5px;
                    text-decoration:none;
                    color:#333;
                    &.prev{
                        font-weight:bold;
                    }
                    &.next{
                        font-weight:bold;
                    }
                    &.other{
                        &:hover{
                            cursor:default;
                            background: #fff;
                            color:#333;
                        }
                    }
                    &:hover,&.curr{
                        background:#666;
                        color:#fff;
                    }
                }

            }
        }
    }
}
